<template>
    <div class="main">
        <vHeader title="修改交易密码" @return="$router.go('-1')" />
        <div class="content">
            <div class="box">

                <div class="row" style="margin-top: 30px;">
                    <div class="top">
                        <img class="icon" src="../assets/images/safeCenter/password.png" />
                        <p>旧密码</p>
                    </div>
                    <div class="bottom">
                        <van-password-input :length="6" :mask="mask1" :value="oldPassword" :focused="showKeyboard1"
                            gutter="0.2rem"
                            @focus="showKeyboard1 = true; showKeyboard2 = false; showKeyboard3 = false;" />
                    </div>
                </div>

                <div class="row" style="margin-top: 30px;">
                    <div class="top">
                        <img class="icon" src="../assets/images/safeCenter/password.png" />
                        <p>新密码</p>
                    </div>
                    <div class="bottom">
                        <van-password-input :length="6" :mask="mask2" :value="newPassword" :focused="showKeyboard2"
                            gutter="0.2rem"
                            @focus="showKeyboard2 = true; showKeyboard1 = false; showKeyboard3 = false;" />
                    </div>
                </div>

                <div class="row" style="margin-top: 30px;">
                    <div class="top">
                        <img class="icon" src="../assets/images/safeCenter/password.png" />
                        <p>确认密码</p>
                    </div>
                    <div class="bottom">
                        <van-password-input :length="6" :mask="mask3" :value="newPasswordConfirm"
                            :focused="showKeyboard3" gutter="0.2rem"
                            @focus="showKeyboard3 = true; showKeyboard2 = false; showKeyboard1 = false;" />
                    </div>
                </div>
            </div>

            <div class="button" :class="isActive ? 'active' : ''">
                确认
            </div>

            <div class="safe">
                <div class="img">
                    <img class="icon" src="../assets/images/bindPhone/safe.png" />
                </div>
                <p>98PAY保障您的信息安全</p>
            </div>



            <!-- 数字键盘 -->
            <van-number-keyboard class="keyboard" v-model="oldPassword" :show="showKeyboard1"
                @blur="showKeyboard1 = false" />
            <van-number-keyboard class="keyboard" v-model="newPassword" :show="showKeyboard2"
                @blur="showKeyboard2 = false" />
            <van-number-keyboard class="keyboard" v-model="newPasswordConfirm" :show="showKeyboard3"
                @blur="showKeyboard3 = false;" />
        </div>



    </div>
</template>

<script>
import api from "@/api/center";
import {
    mapState,
} from "vuex";
export default {
    data() {
        return {
            mask1: false,
            mask2: false,
            mask3: false,
            oldPassword: '',
            newPassword: '',
            newPasswordConfirm: '',
            showKeyboard1: false,
            showKeyboard2: false,
            showKeyboard3: false,
            hide1: true,
            hide2: true,
            hide3: true,
            showPicker: false,

            columns: ['+1 (美国)', '+86 (中国)', '+88 (中国台湾)'],
        }
    },
    watch: {
        //由于vant2 组件问题  密码框长度可以超过6位  通过watch 保证其长度

        oldPassword(newVal, oldVal) {
            if (newVal.length > 6) {
                this.oldPassword = newVal.slice(0, 6);
            }

            //当密码长度达到要求 隐藏密码
            if (newVal.length >= 6) {
                this.mask1 = true;
            }
        },
        newPassword(newVal, oldVal) {
            if (newVal.length > 6) {
                this.newPassword = newVal.slice(0, 6);
            }
            //当密码长度达到要求 隐藏密码
            if (newVal.length >= 6) {
                this.mask2 = true;
            }
        },
        newPasswordConfirm(newVal, oldVal) {
            if (newVal.length > 6) {
                this.newPasswordConfirm = newVal.slice(0, 6);
            }

            //当密码长度达到要求 隐藏密码
            if (newVal.length >= 6) {
                this.mask3 = true;
            }
        },
    },
    computed: {
        ...mapState({
            loginUserinfo: state => state.global.loginUserinfo,
            baseData: state => state.global.baseData
        }),
        //是否可以点击按钮
        isActive() {
            return this.oldPassword.length == 6 && this.newPassword.length == 6 && this.newPasswordConfirm.length == 6
        }
    },
    methods: {
        onConfirm(value, index) {
            this.showPicker = false
            this.$toast(`当前值：${value}, 当前索引：${index}`);
        },

        //获取验证码
        getCode() {
            let _this = this
            function beforeClose(action, done) {
                if (action === 'confirm') {
                    _this.sendCode()
                    setTimeout(done, 1000);
                } else {
                    done();
                }
            }
            this.$dialog.confirm({
                title: '温馨提示',
                message: '请确认是否发送验证码？',
                confirmButtonText: '确认发送',
                beforeClose,
            });
        },
        //执行发送验证码
        sendCode() {
            console.log("send code")
        }
    },
    mounted() { },
}
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
* {
    box-sizing: border-box;
}

.main {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;

    .content {
        min-height: calc(100vh - 1.44rem);
        background-color: #F0F5FD;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 15px 15px;
        position: relative;

        .box {
            width: 100%;

            background: #ffffff;
            border-radius: 8px;
            padding: 15px;

            .row {
                .top {
                    display: flex;
                    align-items: center;

                    p {
                        font-size: 13px;
                        font-weight: 500;
                        color: #444444;
                    }

                    img {
                        width: 17px;
                        height: 17px;
                        margin-right: 8px;
                    }
                }

                .bottom {
                    width: 315px;
                    height: 46px;
                    margin-top: 12px;

                }
            }
        }

        .button {
            width: 345px;
            height: 44px;
            background: #c0c5ca;
            border-radius: 4px;
            margin-top: 20px;
            line-height: 44px;
            text-align: center;
            font-size: 14px;
            color: #ffffff;



            &.active {
                background: #479fff;

                &:active {
                    background: #68aefa;
                }
            }
        }


        .safe {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            P {
                font-size: 14px;
                text-align: center;
                color: #afb1b3;
            }

            .img {
                width: 12px;
                height: 14px;
                margin-right: 5px;
            }

        }
    }



}
</style>

<style scoped>
::v-deep .van-number-keyboard__body {
    flex-wrap: wrap;
}

::v-deep .van-key {
    flex-basis: 30%;
    margin-left: 6px;
    margin-bottom: 6px;
}

::v-deep .van-password-input {
    margin: 0;
}


::v-deep .van-password-input__security li {
    background-color: #f0f5fd;
    border-radius: 3px;
}
</style>